<template>
  <div>
    <!-- getNextDay 方法 -->
    <el-button type="primary" @click="get1" class="margbutton">获取指定时间 后的 addDay 天法</el-button>
    <el-date-picker v-model="value1" value-format="yyyyMMdd" format="yyyy 年 MM 月 dd 日">
    </el-date-picker>
    <span>{{  label1  }}</span>
    <el-divider></el-divider>
    <!-- changeUnit 方法 -->
    <el-button type="primary" @click="get2" class="margbutton">单位转换，亿，万，保留两位小数</el-button>
    <el-input v-model="value2" style="width: 30%"></el-input>
    <span>{{  label2  }}</span>
    <el-divider></el-divider>
    <!-- deepClone 方法 -->
    <el-button type="primary" @click="get3" class="margbutton">数组 对象 的深拷贝</el-button>
    <span>{{  label3  }}</span>
    <el-divider></el-divider>
    <!-- get96TimePoint 方法 -->
    <el-button type="primary" @click="get4" class="margbutton">获取 96 个时间点</el-button>
    <el-input v-model="value4" style="width: 30%"></el-input>
    <el-divider></el-divider>
    <!-- randColor 方法 -->
    <el-button type="primary" @click="get5" class="margbutton">随机获取一个颜色</el-button>
    <el-input v-model="value5" style="width: 30%"></el-input>
    <div class="color" :style="{ background: this.value5 }"></div>
    <el-divider></el-divider>
    <!-- timeChangeStr 方法 -->
    <el-button type="primary" @click="get6" class="margbutton">处理日期 转换成 时间戳</el-button>
    <el-date-picker v-model="value6" value-format="yyyy-MM-dd"></el-date-picker>
    <span>{{  label6  }}</span>
    <el-divider></el-divider>
    <!-- handleDateNo 方法 -->
    <el-button type="primary" @click="get7" class="margbutton">处理日期 转换成 20220331</el-button>
    <el-date-picker v-model="value7" value-format="yyyy-MM-dd"></el-date-picker>
    <span>{{  label7  }}</span>
    <el-divider></el-divider>
    <!-- handleDateHave 方法 -->
    <el-button type="primary" @click="get8" class="margbutton">处理日期 转换成 2022-03-31 11:12:54</el-button>
    <el-date-picker v-model="value8" value-format="yyyy-MM-dd"></el-date-picker>
    <span>{{  label8  }}</span>
    <el-divider></el-divider>
    <!-- renderNumber 方法 -->
    <el-button type="primary" @click="get9" class="margbutton">处理数字 数字/小数</el-button>
    <el-input v-model="value9" style="width: 30%"></el-input>
    <span v-html="label9"></span>
    <el-divider></el-divider>
    <!-- 扁平数据转换成 tree 结构 方法 -->
    <div class="treeBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>原始数据</span>
        </div>
        <div v-for="(tr, index) in treeDataAll" :key="index" class="text item">
          {{'id------' + tr.id + 'parentId' }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>tree 结构数据</span>
        </div>
        <el-tree :data="treeData" :props="defaultProps" node-key="id"></el-tree>
      </el-card>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import {
  getNextDay,
  changeUnit,
  deepClone,
  get96TimePoint,
  randColor,
  timeChangeStr,
  handleDateNo,
  handleDateHave,
  renderNumber,
  buidTree
} from '@/utils/index'

export default {
  data() {
    return {
      // getNextDay 方法
      value1: '',
      label1: '',
      // changeUnit 方法
      value2: '',
      label2: '',
      // deepClone 方法
      object3: [
        { name: '小明', age: 10 },
        { name: '小红', age: 12 },
      ],
      label3: '',
      // get96TimePoint 方法
      value4: '',
      // randColor 方法
      value5: '',
      // timeChangeStr 方法
      value6: '',
      label6: '',
      // handleDateNo 方法
      value7: '',
      label7: '',
      // handleDateHave 方法
      value8: '',
      label8: '',
      // renderNumber 方法
      value9: '',
      label9: '',
      // buidTree 方法
      treeDataAll: [
        { id: '01', text: '01', parentId: null },
        { id: '0101', text: '0101', parentId: '01' },
        { id: '010101', text: '010101', parentId: '0101' },
        { id: '010102', text: '010102', parentId: '0101' },
        { id: '0102', text: '0102', parentId: '01' },
        { id: '010201', text: '010201', parentId: '0102' },
        { id: '02', text: '02', parentId: null },
        { id: '0201', text: '0201', parentId: '02' },
        { id: '020101', text: '020101', parentId: '0201' },
        { id: '020102', text: '020102', parentId: '0201' },
        { id: '0202', text: '0202', parentId: '02' },
        { id: '03', text: '03', parentId: null },
        { id: '0301', text: '0301', parentId: '03' },
        { id: '030101', text: '030101', parentId: '0301' },
        { id: '030102', text: '030102', parentId: '0301' },
      ],
      treeData: [],
      defaultProps: { children: 'children', label: 'text' }

    }
  },
  mounted() {
    console.log('-------', new Date(2006, 0, 12, 22, 19, 35))
    this.treeData = buidTree(this.treeDataAll, null)
  },
  methods: {
    get1() {
      this.label1 = getNextDay(this.value1, '1', 'yyyy-MM-dd HH:mm:ss')
    },
    get2() {
      this.label2 = changeUnit(this.value2, '元')
    },
    get3() {
      this.label3 = deepClone(this.object3)
    },
    get4() {
      this.value4 = get96TimePoint()[9]
    },
    get5() {
      this.value5 = randColor()
    },
    get6() {
      this.label6 = timeChangeStr(this.value6)
      // console.log('------1', new Date())
      // console.log('------2', new Date().getDay())
      // console.log('------3', new Date().toLocaleDateString())
      // console.log('------4', new Date().toLocaleTimeString())
      // console.log('------5', new Date().toLocaleString())
      // console.log('------6', Date.parse(new Date()))
      // console.log('------7', (new Date()).valueOf())
      // console.log('------8', new Date().getTime())
    },
    get7() {
      this.label7 = handleDateNo(this.value7)
    },
    get8() {
      this.label8 = handleDateHave(this.value8)
    },
    get9() {
      this.label9 = renderNumber(this.value9, [20, 10])
    },
  },
}
</script>

<style scoped>
.margbutton {
  margin-right: 20px;
}
.color {
  width: 80%;
  height: 40px;
  border: 1px solid black;
  margin-top: 20px;
}
.treeBox {
  width: 80%;
  height: 450px;
  /* border: 1px solid black; */
  display: flex;
  justify-content: space-between;
}
.box-card {
  width: 45%;
  height: 100%;
  /* border: 1px solid blue; */
}
</style>